<!--临时用户列表页-->
<template>
  <div id="registeredUserChart" class="mainContent">
    <div class="hearders clearfix row">
      <div class="pull-left col-sm-4" style="text-align:center;">
        <label for="search">姓名:</label>
        <input type="text" id="search" v-model="search" placeholder="请输入姓名查询" @blur="changeSearch" onkeyup="this.value=this.value.replace(/\s+/g,'')"/>
      </div>
      <div class="select pull-left col-sm-2" v-clickoutside="handleClose" style="text-align:center;width:130px;padding-right:0;">
        <p :class="{'up' : isShowSection}" @click="showSection">{{section}}</p>
        <ul :class="['link-list',{'show': isShowSection}]">
          <li v-for="(item,index) in tab" :key="item.value"
              @click="changeSection($event)">
            {{item.label}}
          </li>
        </ul>
      </div>
      <div class="select pull-left col-sm-2" v-clickoutside="StatusClose" style="text-align:center;padding-right:0;">
        <p :class="{'up' : isShowStatus}" @click="showStatus">{{status}}</p>
        <ul :class="['link-list',{'show': isShowStatus}]" style="width:100px;">
          <li v-for="(item,index) in statusTab" :key="item.value"
              @click="changeStatus($event)">
            {{item.label}}
          </li>
        </ul>
      </div>
      <div class="pull-right col-sm-4" style="text-align:center;">
        <button @click="btnSearch">查询</button>
        <button @click="btnAdd">新增</button>
      </div>
    </div>
    <div v-if="userListData.length">
      <div class="countTbale">
        <div class="countThead">
          <table class="table">
            <thead>
              <tr>
                <th class="text-center" width="15%">姓名</th>
                <th class="text-center" width="20%">科室</th>
                <th class="text-center" width="15%">职位</th>
                <th class="text-center" width="25%">到期时间</th>
                <th class="text-center" width="25%">操作</th>
              </tr>
            </thead>
          </table>
        </div>
        <div class="countTbody">
          <table class="table table-striped">
            <tbody>
              <tr @click="editUser($event)" v-for="(item,index) in userListData" :data-id="item.ID">
                <td class="text-center" width="15%">{{item.name}}</td>
                <td class="text-center" width="20%">{{item.content}}</td>
                <td class="text-center" width="15%">{{item.Position}}</td>
                <td class="text-center" width="25%">{{item.expirationtime | filterDateTime}}</td>
                <td class="text-center" width="25%"> <button class="athm-btn--mini" @click="editUser($event)" :data-id="item.ID">编辑</button> <button @click="removeUser($event)" class="athm-btn--mini" :data-id="item.ID" style="margin-left:10%;border-color:red;color:red;">删除</button></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <mo-paging :page-index="currentPage"
                 :total="RecordCount"
                 :page-size="pageSize"
                 @change="pageChange"></mo-paging>
      <confirm ref="alert" :message="'确认删除该用户吗？'" :sureBtn="DeleteItern"> </confirm>
    </div>
    <loading v-if="userListData.length == 0 && isShow"></loading>
    <noSearch v-if="userListData.length == 0 && !isShow"> </noSearch>
  </div>
</template>
<script>
  import MoPaging from '@/components/paging/paging'  //引入分页组件
  import loading from '@/components/loading/loading'
  import noSearch from '@/components/search/noSearch' //导入没有搜索结果组件
  import confirm from '@/components/confirm/confirm'
  import { apiGetInternList, apiDeleteItern } from '@/api/api'
export default {
    data() {
      return {
        search: '',
        isShowSection: false,
        isShowStatus: false,
        tab: [
          { label: '全部', value: 1 },
          { label: '外科楼ICU', value: 2 },
          { label: '内科楼ICU', value: 3 },
          { label: '急诊科EICU', value: 4 }
        ],
        statusTab: [
          { label: '全部', value: 0 },
          { label: '过期', value: 1 },
          { label: '正常', value: 2 },
        ],
        isShow:true,
        section: '科室',
        status: '状态',
        pageSize: 8, //每页显示8条数据
        currentPage: 1, //当前页码
        RecordCount: 0, //总记录数
        userListData: [],
        doctorName: '',  //医生姓名
        department: '',   //科室
        id: '',  //临时医生ID
        isexpirationtime: 0, //标识是否过期 1=过期  2没过期 0就是所有
      }
    },
    watch: {
      section: {
        handler(curVal, oldVal) {
          //console.log(curVal)
          if (curVal == '科室') {
            this.department = '';
            this.userListData = [];
            this.GetInternList();
          } else {
            this.department = curVal;
            this.userListData = [];
            this.GetInternList();
          }
        }
      },
      status: {
        handler(curVal, oldVal) {
          //console.log(curVal)
          if (curVal == '状态') {
            this.isexpirationtime = 0;
            this.userListData = [];
            this.GetInternList();
          } else if (curVal == '过期') {
            this.isexpirationtime = 1;
            this.userListData = [];
            this.GetInternList();
           }else{
            this.isexpirationtime = 2;
            this.userListData = [];
            this.GetInternList();
         }
        }
      }
    },
    mounted() {
      this.GetInternList()
    },
    methods: {
      //从page组件传递过来的当前page
      pageChange(page) {
        this.currentPage = page;
        this.GetInternList();
      },
      showSection() {
        this.isShowSection = !this.isShowSection;
      },
      showStatus() {
        this.isShowStatus = !this.isShowStatus;
      },
      changeSection(event) {                       //科室选择输入框改变是执行
        this.isShowSection = false;
        if ($.trim(event.currentTarget.innerHTML) != this.section) {  // 当选择的值跟当前的值不一样时
          if ($.trim(event.currentTarget.innerHTML) == '全部') {
            this.section = '科室'
          } else {
            this.section = $.trim(event.currentTarget.innerHTML);  //赋值
          }
        }
      },
      changeStatus(event) {                       //状态选择输入框改变是执行
        this.isShowStatus = false;
        if ($.trim(event.currentTarget.innerHTML) != this.status) {  // 当选择的值跟当前的值不一样时
          if ($.trim(event.currentTarget.innerHTML) == '全部') {
            this.status = '状态'
          } else {
            this.status = $.trim(event.currentTarget.innerHTML);  //赋值
          }
        }
      },
      handleClose() {
        this.isShowSection = false;
      },
      StatusClose() {
        this.isShowStatus = false;
      },
      changeSearch() {
        if (this.search == '') {
          this.doctorName = '';
          this.userListData = [];
          this.GetInternList();
        }
      },
      btnSearch() {   //查询用户
        //console.log(this.search, this.section)
        if (this.search == '') {
          this.$toast.center('请输入姓名查询！！');
        } else {
          this.doctorName = this.search;
          this.userListData = [];
          this.GetInternList();
        }
      },
      btnAdd() {    //新增用户
        this.$router.push({
          path: '/registeredUser/registeredUserFrom',
          query: {item:4,status: 0}         //0表示新增，1表示编辑
        })
      },
      editUser(event) {   //编辑用户
        let id = event.currentTarget.getAttribute("data-id");
        this.$router.push({
          path: '/registeredUser/registeredUserFrom',
          query: { item: 4, status: 1 ,id:id }         //0表示新增，1表示编辑
        })
      },
      removeUser(event) {       //删除用户弹出确认框
        event.stopPropagation(); //阻止事件冒泡
        this.id = event.currentTarget.getAttribute("data-id");
        this.$refs.alert.show();
        //console.log('正在删除');
      },
      DeleteItern() {       //点击弹出确认框确定按钮执行
        apiDeleteItern({
          internId: this.id
        })
          .then(res => {
            //console.log(res)
            if (res.Status == 1) {
              this.GetInternList();
              this.$toast.center(res.Message)
            } else {
              this.$toast.center(res.Message)
            }
          })
        //console.log('确定删除吗')
      },
      GetInternList() {           //查询用户列表
        apiGetInternList({
          isexpirationtime: this.isexpirationtime,
          doctorName: this.doctorName,
          department: this.department,
          pageIndex: this.currentPage,
          pageSize: this.pageSize
        })
          .then(res => {
            //console.log(res
            if (res.Status == 1) {
              this.isShow = true;
              this.userListData = JSON.parse(res.Data);
              this.RecordCount = res.TotalCount;
              //console.log(res)
              //console.log(this.RecordCount)
            } else {
              this.isShow = false;
              this.userListData = [];
            }
          })
      }
    },
    components: {
      loading,
      noSearch,
      MoPaging,
      confirm
    }
}
</script>
<style scoped>
  #registeredUserChart{
     padding:20px;
  }
  .hearders{
    margin-bottom:20px;
    display: flex;
    flex-wrap: wrap;
  }
  .hearders label{
    font-weight:normal;
    margin-right:8px;
  }
  .hearders input{
    height:34px;
    border:1px solid #ccc;
    border-radius:4px;
    padding-left:8px;
  }
    .hearders button {
      padding: 7px 15px;
      background-color: #11a7f3;
      color: #fff;
      vertical-align: middle;
      margin-right:20px;
    }
  .select {
    width: 100px;
    height: 34px;
    line-height: 34px;
    background: #fff;
    padding-left: 10px;
    border: 1px solid #ccc;
    margin-right:15px;
  }

    .select p {
      color: #555;
      position: relative;
    }

      .select p:after {
        display: inline-block;
        content: '';
        width: 10px;
        height: 10px;
        background-image: url("../../../../static/images/unfold_arron.png");
        background-repeat: no-repeat;
        background-size: contain;
        vertical-align: middle;
        margin-right: 10px;
        margin-top: 12px;
        float: right;
      }

      .select p.up:after {
        background-image: url("../../../../static/images/up_arron.png");
      }
  .athm-btn--mini{
    color: #386ed3;
    background-color: #fff;
    border: 1px solid #386ed3;
    min-height: 20px;
    font-size: 14px;
    line-height: 20px;
    padding: 5px 10px;
    border-radius: 2px;
  }
  .link-list {
    position: relative;
    z-index: 9999;
    display: none;
    border: 1px solid #eee;
    left: -10px;
    width: 130px;
    background-color: #fff;
    box-shadow: 2px 5px 5px #ccc;
  }

    .link-list li {
      text-align: center;
      cursor: pointer;
    }

      .link-list li:hover {
        background-color: #f6f6f6;
        border-bottom: 1px solid #ccc;
      }
  .countTbale {
    height: calc(100% - 120px);
  }
  .table > thead > tr > th {
    border-bottom: none;
  }

  .table > thead > tr > th {
    border-bottom: none;
  }

  .countThead, .countTbody {
    width: 97%;
    margin: 0 auto;
    /*border:1px solid #f4f4f4;*/
    border-top: none;
  }

  .countTbody {
    border: 1px solid #ddd;
    border-top: 0;
  }

  .table {
    margin-bottom: 0;
  }

  .countThead thead tr {
    height: 42px;
    line-height: 42px;
    background-color: #11a7f3;
    color: #fff;
  }

  .countThead > thead > tr > th {
    border-bottom: none;
  }

  .countTbody {
    max-height: calc(100% - 50px);
    overflow-y: auto;
  }

    .countTbody tbody tr td {
      vertical-align: middle;
      border-top: 1px solid #ddd;
      color: #333;
      border-right: 1px solid #ddd;
    }

      .countTbody tbody tr td:last-child {
        border-right: none;
      }

    .countTbody tbody > tr:first-child > td {
      border-top: none;
    }
</style>
